import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Col, Form, Icon, Popover, Row, Table } from 'antd';
import EditableCell from '/common/components/EditableTable/EditableCell';
import keyCodes from '/common/keyCodes';
import findup from 'findup-element';
import { getRandomKey, isObjectValEqual, isObjectValueEmpty, isValEmpty } from '/common/utils/utils';
import filter from 'lodash/filter';
import findIndex from 'lodash/findIndex';
import indexOf from 'lodash/indexOf';
import isArray from 'lodash/isArray';
import isEmpty from 'lodash/isEmpty';
import isFunction from 'lodash/isFunction';
import isObject from 'lodash/isObject';
import map from 'lodash/map';
import omit from 'lodash/omit';

const styles = {
  cursor: 'pointer',
};

const EditableContext = React.createContext();

/**
 * 行
 */
const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form} key={props.uniKey}>
      <tr {...omit(props, ['uniKey'])} />
    </EditableContext.Provider>
);
const EditableFormRow = Form.create()(EditableRow);

/**
 * 可编辑表格
 */
@connect(({ global }) => ({
  global,
}))
export default class EditableTable extends Component {

  static defaultProps = {
    minLength: 3,
    size: 'large',
    canSort: true,
    autoAdd: true,
    /**
     * 此方法的返回值，可以设置“EditableTable 可编辑表格” 新增行的默认对象数据，
     * 例如：
     * function(curRecord) {
     *   return { currency: {id:1, name:'人民币', code:'rmb'}, exchange: 1 };
     * }
     * 则当表格新增一行数据时，默认会带有 currency 和 exchange 两个字段
     * @param curRecord Object 当前编辑行的对象数据
     * @returns Object
     */
    getDefaultRecord: null, // Function
    moreSetting: false, // Boolean 是否需要每行右侧的操作按钮
    callUpdateDataFun: null, // Function 有数据更新时的回调 function(data)
    onRowUpdate: null,
    onCellUpdate: null, // Function 当有单元格的数据更新时会回调，
    // 此函数如果返回对象数据，则会以返回的数据作为修改数据；
    // 此函数如果返回false，则不进行此次更新；
    // function(dataIndex, record, prevRecord, rowIndex):Object newRecord||Boolean
    customDealDataFunc: null, // Function 自定义的处理列表数据的函数
  };

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      editingRow: '',
      editingCol: '',
      mousingRow: '',
      moreSetPosTop: 0,
      // curRowRecord: {}, // 当前行的记录数据
    };
    this.curRowRecord = {}; // 当前行的记录数据
    this.editableCols = [];
    this.editableColRefs = {};
    this.mousing = { row: '', col: '' };
    this.tableID = `edit-table-${(+new Date())}`;
    this.tableBody = null;
    this.pageInfo = false === props.pagination ? false : props.pagination || { current: 1, pageSize: 10 }; // 分页数据 {current: 1, pageSize: 10}
  }

  componentDidMount() {
    const { dataSource, onRef } = this.props;
    if (isFunction(onRef)) {
      onRef(this);
    }

    this.dealData(dataSource);

    // 找到可横向滚动的table-body
    const { scroll } = this.props;
    if (scroll && scroll.x > 0) {
      const domList = document.getElementsByClassName('ant-table-fixed');
      for (let i = 0, len = domList.length; i < len; i++) {
        let dom = domList[i];
        if (-1 !== indexOf(dom.parentNode.classList, 'ant-table-body')) {
          const pDom = findup(domList[i], (parent) => {
            return -1 !== indexOf(parent.classList, this.tableID);
          });
          if (pDom) {
            this.tableBody = dom.parentNode;
          }
        }
      }
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (!isObjectValEqual(nextProps, this.props) || !isObjectValEqual(nextState, this.state));
  }

  componentDidUpdate(prevProps, prevState) {
    // console.log('EditableTable update');
    if (!isObjectValEqual(this.props.dataSource, prevProps.dataSource)) {
      // console.log('EditableTable dataSource update');
      const { dataSource } = this.props;
      this.dealData(dataSource);
    }
  }

  getAjaxData() {
    return this.state.data.filter((v, k) => {
      return !isObjectValueEmpty(omit(v, ['key', 'id']));
    }).map(v => (omit(v, ['key'])));
  }

  /**
   * 更新列表数据，用于外部调用
   * @param list
   */
  updateDataList(list) {
    this.dealData(list);
  }

  // 切换单元格编辑状态
  changeEditing(rowIndex, colIndex) {
    // console.log('editing', rowIndex, colIndex);
    this.mousing = { row: rowIndex, col: colIndex };
    if (this.state.editingRow !== rowIndex || this.state.editingCol !== colIndex) {
      this.setState({ editingRow: rowIndex, editingCol: colIndex });
    }
  }

  /**
   * 保存某单元格的值
   * @param value
   * @param dataIndex
   * @param rowIndex
   * @param afterCb
   */
  handleSave = (value, dataIndex, rowIndex, afterCb) => {
    // console.log('handleSave');
    const { onCellUpdate, getDefaultRecord } = this.props;
    const newData = [...this.state.data];
    let item = { ...newData[rowIndex] };
    item[dataIndex] = value;

    if (isFunction(onCellUpdate)) {
      let newItem = onCellUpdate(dataIndex, item, newData[rowIndex], rowIndex, { list: this.state.data });

      if (false === newItem) return;

      if (isObject(newItem) && !isEmpty(newItem)) {
        item = newItem;
      }
    }
    if (isFunction(getDefaultRecord) && !isValEmpty(value)) {
      item = { ...getDefaultRecord(item), ...item };
    }

    newData.splice(rowIndex, 1, item);
    this.dealData(newData, afterCb);
  };

  /**
   * 编辑上一行当前列单元格
   */
  editUp() {
    // console.log('editUp');
    // 判断是否有上一个可编辑单元格，
    const { autoAdd } = this.props;
    const $this = this;

    if (0 <= parseInt($this.state.editingRow)) {
      let prevRow = $this.state.editingRow - 1;
      // 如果有，就将上一个单元格改为编辑状态
      if (0 <= prevRow) {
        $this.mousing.row = prevRow;
        $this.setState({ editingRow: prevRow });
      } else {
        // 没有上一个可编辑单元格

        // 如果允许自动添加行，则往上添加一行
        if (autoAdd) {
          this.editRow('inner');
        }
      }
    }
  }

  /**
   * 编辑下一行当前列单元格
   */
  editDown() {
    // console.log('editDown');
    // 判断是否有下一个可编辑单元格，
    const { autoAdd } = this.props;
    const $this = this;

    if (0 <= parseInt($this.state.editingRow)) {
      let nextRow = $this.state.editingRow + 1;
      // 如果有，就将下一个单元格改为编辑状态
      if (this.state.data[nextRow]) {
        $this.mousing.row = nextRow;
        $this.setState({ editingRow: nextRow });
      } else {
        // 没有下一个可编辑单元格

        // 如果允许自动添加行，则往下添加一行
        if (autoAdd) {
          this.editRow('add');
        }
      }
    }
  }

  /**
   * 编辑上一个单元格
   */
  editPrev(offsetLeft) {
    // console.log('editPrev');
    // 判断是否有上一个可编辑单元格，
    const $this = this;
    let prevCol;
    const curColInd = $this.editableCols.indexOf($this.state.editingCol);
    if (-1 !== curColInd) {
      prevCol = $this.editableCols[curColInd - 1];
    }
    // 如果有，就将上一个单元格改为编辑状态
    if ('undefined' !== typeof prevCol && null !== prevCol) {
      $this.mousing.col = prevCol;
      $this.setState({ editingCol: prevCol }, () => {
        // 将编辑的单元格滚动给到可见区域
        this.scroll2View(offsetLeft);
      });
    } else {
      // 如果没有，则往上一行
      const newState = {};
      const prevRow = $this.state.editingRow - 1;
      newState.editingRow = prevRow;

      if (prevRow !== -1) { // 往上一行，最后一列
        newState.editingCol = $this.editableCols[$this.editableCols.length - 1];
        $this.mousing.row = newState.editingRow;
        $this.mousing.col = newState.editingCol;
        $this.setState(newState, () => {
          // 横向滚动到最右边
          if (this.tableBody) {
            this.tableBody.scrollLeft = 1000;
          }
        });
      }
    }
  }

  /**
   * 编辑下一个单元格
   */
  editNext(offsetLeft) {
    // console.log('editNext');
    // 判断是否有下一个可编辑单元格，
    const { getDefaultRecord, autoAdd } = this.props;
    const curRowRecord = this.curRowRecord;
    // const { curRowRecord } = this.state;
    const $this = this;
    let nextCol;
    const curColInd = $this.editableCols.indexOf($this.state.editingCol);
    if (-1 !== curColInd) {
      nextCol = $this.editableCols[curColInd + 1];
    }
    // 如果有，就将下一个单元格改为编辑状态
    if ('undefined' !== typeof nextCol && null !== nextCol) {
      $this.mousing.col = nextCol;
      $this.setState({ editingCol: nextCol }, () => {
        // 将编辑的单元格滚动给到可见区域
        this.scroll2View(offsetLeft);
      });
    } else {
      // 如果没有下一个单元格，则往下一行
      const nextRow = $this.state.editingRow + 1;
      const newState = {};

      // 没有下一行
      if (isEmpty(this.state.data[nextRow])) {
        // 如果可以自动添加，则添加一行；否则，取消编辑状态
        if (autoAdd) {
          // 横向滚动到最左边
          if (this.tableBody) {
            this.tableBody.scrollLeft = 0;
          }
          // 添加一行
          this.editRow('add', false, { editingCol: $this.editableCols[0] });
          return;
        } else {
          newState.editingRow = '';
          newState.editingCol = '';
        }
      } else { // 有下一行
        newState.editingRow = nextRow;
        newState.editingCol = $this.editableCols[0]; // 下一行的第一个可编辑单元格

        let newRecord = isFunction(getDefaultRecord) ? getDefaultRecord({ ...curRowRecord }) : {};
        if (!isObject(newRecord)) {
          newRecord = {};
          for (let o in curRowRecord) {
            newRecord[o] = 'key' === o ? getRandomKey() : null;
          }
        }
        if ('undefined' === typeof newRecord.key) {
          newRecord.key = getRandomKey();
        }

        // 如果下一行的对象值为空，则设置默认值
        if (isObjectValueEmpty(omit(this.state.data[nextRow], ['key', 'id']))) {
          newState.data = [...$this.state.data];
          newState.data[nextRow] = newRecord;
        }
      }

      $this.mousing.row = newState.editingRow;
      $this.mousing.col = newState.editingCol;
      $this.setState(newState, () => {
        // 横向滚动到最左边
        if (this.tableBody) {
          this.tableBody.scrollLeft = 0;
        }
      });
    }
  }

  editRow(key, isMousing, moreState = {}) {
    const { getDefaultRecord, onRowUpdate, canSort } = this.props;
    const { data, mousingRow, editingRow } = this.state;
    const moreNewState = { ...moreState };
    const record = data[parseInt(isMousing ? mousingRow : editingRow)];

    if (isEmpty(record)) return;

    let len = data.length,
        curIndex = findIndex(data, (o) => {
          return o.key == record.key;
        }),
        tempArr = [...data],
        setArrInd = (arr, ind1, ind2) => {
          if (arr[ind2]) {
            return arr.splice(ind2, 1, arr[ind1])[0];
          } else {
            return arr[ind1];
          }
        };

    if ('delete' === key) {
      tempArr = filter(data, (o) => {
        return o.key != record.key;
      });

      if (isEmpty(tempArr[curIndex])) {
        moreNewState.editingRow = tempArr[curIndex - 1] ? curIndex - 1 : 0;
      }

    } else if ('up' === key) {
      if (!canSort) return false;

      if (curIndex > 0 && curIndex < len) {
        tempArr[curIndex] = setArrInd(tempArr, curIndex, curIndex - 1);
        moreNewState.editingRow = curIndex - 1;
      }

    } else if ('down' === key) {
      if (!canSort) return false;

      if (curIndex < len - 1) {
        tempArr[curIndex] = setArrInd(tempArr, curIndex, curIndex + 1);
        moreNewState.editingRow = curIndex + 1;
      }

    } else if ('add' === key || key === 'inner') {
      let newRecord = isFunction(getDefaultRecord) ? getDefaultRecord({ ...record }) : {};

      if (!isObject(newRecord)) {
        newRecord = {};

        for (let o in record) {
          newRecord[o] = 'key' === o ? getRandomKey() : null;
        }
      }

      if ('undefined' === typeof newRecord.key) {
        newRecord.key = getRandomKey();
      }
      // console.log('curIndex', curIndex);

      if ('add' === key) {
        tempArr.splice((curIndex + 1), 0, newRecord);
        moreNewState.editingRow = curIndex + 1;
      } else {
        tempArr.splice(curIndex, 0, newRecord);
        moreNewState.editingRow = curIndex;
      }
    }

    if (isFunction(onRowUpdate)) {
      let newData = onRowUpdate({
        type: key,
        record: record,
        rowIndex: curIndex,
        dataList: tempArr,
        preDataList: this.state.data,
      });
      if (false === newData) return;

      if (isArray(newData)) {
        tempArr = newData;
      }
    }

    if ('undefined' !== typeof moreNewState.editingRow) {
      this.mousing.row = moreNewState.editingRow;
    }

    this.dealData(tempArr, null, moreNewState);
  }

  saveCell(e, record, col, afterCb) {
    const $this = this;
    const keyStr = `ref_${record.key}_${col.dataIndex}`;

    if ($this.editableColRefs[keyStr] && isFunction($this.editableColRefs[keyStr].save)) {
      this.curRowRecord = record;
      // $this.setState({ curRowRecord: record });
      let offsetLeft;

      if (e && e.currentTarget) {
        offsetLeft = e.currentTarget.offsetLeft;
      }
      $this.editableColRefs[keyStr].save(e, () => {
        let offLeft = isEmpty(col.fixed) ? offsetLeft + 50 : 0;
        isFunction(afterCb) && afterCb(offLeft);
      });
    }
  }

  dealData(data, afterCb, moreNewState = {}) {
    const { minLength = 3, customDealDataFunc } = this.props;
    const curRowRecord = this.curRowRecord;
    // const { curRowRecord } = this.state;
    let list = [];

    if (isArray(data) && data.length > 0) {
      list = map(data, v => (v.key ? { ...v } : {
        ...v,
        key: v.id ? v.id : getRandomKey(),
      }));
    }

    while (list.length < minLength) {
      let newRecord = {};

      if (!isObject(newRecord)) {
        newRecord = {};

        for (let o in curRowRecord) {
          newRecord[o] = 'key' === o ? getRandomKey() : null;
        }
      }

      if ('undefined' === typeof newRecord.key) {
        newRecord.key = getRandomKey();
      }
      list.push(newRecord);
    }

    if (isFunction(customDealDataFunc)) {
      list = customDealDataFunc(list);
    }

    this.setState({ data: list, ...moreNewState }, () => {
      afterCb && afterCb();
    });
  }

  /**
   * 将编辑的单元格滚动给到可见区域
   * @param offsetLeft
   */
  scroll2View(offsetLeft) {
    // 将编辑的单元格滚动给到可见区域
    if (this.tableBody && offsetLeft > 0 && isFunction(this.tableBody.scrollBy)) {
      const scrollLeft = this.tableBody.scrollLeft;
      // console.log('scroll');
      if (offsetLeft - scrollLeft > 400) {
        this.tableBody.scrollBy(offsetLeft - scrollLeft - 400, 0);

      } else if (offsetLeft - scrollLeft < 100) {
        this.tableBody.scrollBy(-(100 - offsetLeft + scrollLeft), 0);
      }
    }
  }

  // renderActContent() {
  //   const { canSort } = this.props;
  //   let keyMapLocale = formatMsgByCn('快捷键');
  //
  //   return (<Row style={{ width: 116, textAlign: 'center', margin: '0px -6px' }}>
  //     {
  //       canSort && (
  //         <Col span={8}>
  //           <Button style={{ marginBottom: 8, height: 'auto', padding: 9, border: 0 }} title={`${formatMsgByCn('上移')}（${keyMapLocale}：Alt+Up）`}
  //                   onClick={(e) => {
  //                     this.editRow('up', true);
  //                   }}>
  //             <Icon type="arrow-up"/>
  //           </Button>
  //
  //           <Button style={{ height: 'auto', padding: 9, border: 0 }} title={`${formatMsgByCn('下移')}（${keyMapLocale}：Alt+Down）`}
  //                   onClick={(e) => {
  //                     this.editRow('down', true);
  //                   }}>
  //             <Icon type="arrow-down"/>
  //           </Button>
  //         </Col>
  //       )
  //     }
  //     <Col span={canSort ? 16 : 24}>
  //       <Button size={'small'} style={{ marginBottom: 8, width: '100%' }} title={`${keyMapLocale}：Shift+Alt+Down`}
  //               onClick={(e) => {
  //                 this.editRow('add', true);
  //               }}>{formatMsgByCn('添加行')}</Button>
  //       <Button size={'small'} style={{ marginBottom: 8, width: '100%' }} title={`${keyMapLocale}：Shift+Alt+Up`}
  //               onClick={(e) => {
  //                 this.editRow('inner', true);
  //               }}>{formatMsgByCn('插入行')}</Button>
  //       <Button size={'small'} style={{ width: '100%' }} title={`${keyMapLocale}：Shift+Delete 、 Shift+Backspace`}
  //               onClick={(e) => {
  //                 this.editRow('delete', true);
  //               }}>{formatMsgByCn('删除行')}</Button>
  //     </Col>
  //   </Row>);
  // }

  // renderMoreSetting() {
  //   const { mousingRow } = this.state;
  //
  //   if ('' === mousingRow || false === this.props.moreSetting) return null;
  //
  //   return (
  //     <Popover
  //       placement="right"
  //       content={
  //         this.renderActContent()
  //       }>
  //          <span
  //            className={'more-btn'}
  //            style={{
  //              ...styles,
  //              // padding: 'large' === size ? '20px 6px' : 6,
  //              display: 'block',
  //              position: 'absolute',
  //              left: '100%',
  //              top: this.state.moreSetPosTop,
  //            }}>
  //           <Icon type="setting"/>
  //        </span>
  //     </Popover>
  //   );
  // }

  filterCol() {
    const { columns } = this.props;

    const $this = this;
    // 分页数据
    let current = null;
    let pageSize = null;
    if (this.pageInfo) {
      current = this.pageInfo.current;
      pageSize = this.pageInfo.pageSize;
    }

    this.editableCols = [];
    return columns.map((col, ind) => {
      const { editable, editingSetting } = col;

      if (true !== editable) {
        return col;
      }
      //根据title转换国际语言
      // col.title = newTitle;
      this.editableCols.push(ind);
      return {
        ...col,
        onCell: (record, rowIndex) => {
          let rowInd = current && pageSize ? ((current - 1) * pageSize + rowIndex) : rowIndex;
          return {
            record,
            rowIndex: rowInd,
            colIndex:
            ind,
            dataIndex:
            col.dataIndex,
            title:
            col.title,
            editable,
            editing:
                ($this.state.editingRow === rowInd && $this.state.editingCol === ind),
            editingSetting,
            onRef:
                (ref) => {
                  const keyStr = `ref_${record.key}_${col.dataIndex}`;
                  // console.log('onRef', keyStr);
                  $this.editableColRefs[keyStr] = ref;
                },
            onClick:
                (e) => {
                  e.preventDefault();
                  $this.changeEditing(rowInd, ind);

                  if (isEmpty(col.fixed)) {
                    let offsetLeft;
                    if (e && e.currentTarget) {
                      offsetLeft = e.currentTarget.offsetLeft;
                    }
                    this.scroll2View(offsetLeft);
                  }
                },
            onMouseEnter:
                (e) => {
                  // console.log('onMouseEnter', this.mousing.row, this.mousing.col);
                  this.mousing = { row: 0, col: 0 };
                },
            onMouseLeave:
                (e) => {
                  // // console.log('mouseLeave', this.mousing.row, this.mousing.col);
                  this.mousing = { row: '', col: '' };
                },
            onBlur:
                (e) => {
                  // console.log('onblur');
                  const keyStr = `ref_${record.key}_${col.dataIndex}`;
                  // console.log('keyStr', keyStr);
                  if ($this.editableColRefs[keyStr] && isFunction($this.editableColRefs[keyStr].save)) {
                    $this.editableColRefs[keyStr].save(e);
                  }
                  if ('' === this.mousing.row && this.mousing.col === '') {
                    // const keyStr = `ref_${rowIndex}_${ind}`;
                    // console.log('keyStr', keyStr);
                    // if ($this.editableColRefs[keyStr] && isFunction($this.editableColRefs[keyStr].save)) {
                    //   $this.editableColRefs[keyStr].save(e, () => {
                    //     $this.changeEditing('', '');
                    //   });
                    // } else {
                    $this.changeEditing('', '');
                    // }
                  }
                },
            onKeyDown:
                (e) => {
                  let keyCode = e.keyCode || e.which || e.charCode;
                  let shiftKey = e.shiftKey;
                  let altKey = e.altKey;
                  // console.log('onKeyDown', keyCode, shiftKey, altKey);
                  // 取消 tab 的默认动作
                  if (keyCodes.tab === keyCode || shiftKey || altKey) {
                    // e.stopPropagation();
                    e.preventDefault();
                  }
                  // shift+alt+
                  if (shiftKey && altKey) {
                    // shift+alt+up 插入
                    if (keyCodes.up === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editRow('inner');
                      });
                    }
                    // shift+alt+down 添加
                    else if (keyCodes.down === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editRow('add');
                      });
                    }
                  }
                  // shift+
                  else if (shiftKey) {
                    // shift+backspace shift+delete 删除当前行
                    if (keyCodes.backspace === keyCode || keyCodes.del === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editRow('delete');
                      });
                    }
                    // shift+up 上一行当前列单元格
                    else if (keyCodes.up === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editUp();
                      });
                    }
                    // shift+down 下一行当前列单元格
                    else if (keyCodes.down === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editDown();
                      });
                    }
                    // shift+tab shift+left 上一单元格
                    else if (keyCodes.tab === keyCode || keyCodes.left === keyCode) {
                      this.saveCell(e, record, col, (offLeft) => {
                        this.editPrev(offLeft);
                      });
                    }
                    // shift+right 下一单元格
                    else if (keyCodes.right === keyCode) {
                      this.saveCell(e, record, col, (offLeft) => {
                        this.editNext(offLeft);
                      });
                    }
                  }
                  // alt+
                  else if (altKey) {
                    // alt+up 当前行上移
                    if (keyCodes.up === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editRow('up');
                      });
                    }
                    // alt+down 当前行下移
                    else if (keyCodes.down === keyCode) {
                      this.saveCell(e, record, col, () => {
                        $this.editRow('down');
                      });
                    }
                  }
                  // enter tab 切换到下一单元格
                  else if (keyCodes.enter === keyCode || keyCodes.tab === keyCode) {
                    this.saveCell(e, record, col, (offLeft) => {
                      this.editNext(offLeft);
                    });
                  }
                  // 禁止 F5 刷新
                  else if (keyCodes.f5 === keyCode) {
                    e.preventDefault();
                  }
                },
            onChangeEdit:
                this.changeEditing.bind(this),
            onSave:
            this.handleSave,
            EditableContext,
          };
        },
      };
    });
  }

  render() {
    const { data } = this.state;

    const col = this.filterCol();
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };
    return (
        <div
            style={{ position: 'relative' }}
            ref={(ref) => {
              this.wrapRef = ref;
            }}
            // onMouseLeave={(e) => {
            //   this.setState({ mousingRow: '' }); // 隐藏右侧操作按钮
            // }}
        >
          <Table
              components={components}
              className={`${this.tableID} ${this.props.className || ''}`}
              {...omit(this.props, ['columns', 'dataSource', 'className'])}
              columns={col}
              dataSource={data}
              onRow={(record, index) => {
                return {
                  uniKey: record.key,
                  onMouseEnter: (e) => {// 设置右侧操作按钮的位置
                    this.curRowRecord = record;
                    // this.setState({
                    //   curRowRecord: record,
                    //   mousingRow: index,
                    //   // moreSetPosTop: e.currentTarget.offsetTop,
                    // });
                  },
                };
              }}
              onChange={(pagination, filters, sorter, extra) => {
                // const {currentDataSource} = extra;
                // console.log('pagination', pagination) // {current: 1, pageSize: 10}
                // let { current, pageSize } = pagination;
                this.pageInfo = pagination;
              }}
          />
          {/*{*/}
          {/*  this.renderMoreSetting()*/}
          {/*}*/}
        </div>
        // <ContextMenu
        //  content={this.renderActContent()}
        // contentStyle={{ padding: '6px 14px' }}>
        // </ContextMenu>
    );
  }
}
